import { Navigator, View, ScrollView, Text, Image } from '@tarojs/components';
import Taro from '@tarojs/taro';
import withWeapp from '@tarojs/with-weapp';
import { host } from '../../utils/config';
import { rpc } from '../../utils/util'
import Panel from '../../component/panel';
import Page from "../../component/page";
import Article from '../../component/article'
import './index.scss'

const flow = require('../../utils/flow.js')
const modules = require('./module.js')
const regeneratorRuntime = require('../../utils/async.js')
const app = Taro.getApp()

@withWeapp('Page')
class TagPage extends Taro.Component {
  state = {
    articles: {},
    defaultTagName: '我的'
  }
  componentWillMount = async () => {
    this.flow = new flow(
      this,
      modules
    )
    await this.flow.dispatch('getMe');
    await this.flow.dispatch('getList');
  }
  onScrollToLower = (e) => {
    this.setState({
      downLoading: true,
      page: ++this.state.page
    }, () => {

      this.loadMore().then(() => {
        this.setState({ downLoading: false })
      }).catch(() => {
        // 失败之后
        Taro.showToast({ title: '数据加载失败', icon: 'none' })
        this.setState({
          downLoading: false,
          page: --this.state.page
        })
      })

    })
  }
  onLoadMore = async e => {
    // const { name } = e.target.dataset
    const { defaultTagName, articles } = this.state;
    const curTag = articles[defaultTagName];

    if (curTag.hasMore) {
      await this.flow.dispatch('loadMore', {
        key: defaultTagName,
        pageIndex: curTag.pageIndex + 1
      })
    }
  }
  render() {
    const { headerHeight, contentHeight } = app.globalData
    const { me = {}, downLoading, data = [] } = this.state;
    const {
      articles,
      scrollTop,
      defaultTagName
    } = this.state

    const current = articles[defaultTagName]
    // name desc img
    const { user_tags_info: myTags = [] } = me;

    return (
      <View>
        <Page
          onClickLeftIcon={this.back}
          title="标签"
          isPrevPadding={true}
        />
        <ScrollView
          className="page-container"
          scrollWithAnimation="true"
          onScrollToLower={this.onLoadMore}
          scrollY="true"
          style={`height: ${contentHeight - 10}px;margin-top: ${headerHeight + 5}px`}
        >
          <View className="app-panel">
            <View className="app-title">
              <Text>关注的标签</Text>
              <Navigator url="" style={{ color: '#777', fontSize: '13px' }}>全部></Navigator>
            </View>
            <View className="app-content">
              <ScrollView
                scrollX={true}
                style={{ display: 'flex', whiteSpace: 'nowrap' }}
              >
                {
                  myTags.map(tag => (
                    <Navigator
                      style={{ display: 'inline-flex' }}
                      url={`../tag-detail/index?tag=${tag.name}`}
                    >
                      <View className="app-tag">
                        <Image className="app-tag-img" src={tag.img} />
                        <Text className="app-tag-title">{tag.name}</Text>
                        <Text className="app-tag-tips">{tag.desc}</Text>
                      </View>
                    </Navigator>
                  ))
                }
              </ScrollView>
            </View>
          </View>
          <View className="app-panel">
            <View className="app-title">
              <Text>内容更新</Text>
              <Navigator url="" style={{ color: '#777', fontSize: '13px' }}></Navigator>
            </View>
            <View className="app-content">
              <View className="article-container">
                  {
                    current && current.articles && current.articles.map((article, index) => {
                      return <Article article={article} />
                    })
                  }
                  <View
                    className={
                      current.showLoading ? 'more-arts' : 'hide'
                    }
                  >
                    加载中...
                  </View>
                  <View
                    className={
                      current.hasMore ? 'hide' : 'no-more-arts'
                    }
                  >
                    --没有更多内容了--
                  </View>
                </View>
            </View>
          </View>
        </ScrollView>
      </View>
    )
  }
}

export default TagPage
